<template>
  <section class="UserIndex-container">
    <user-search ref="search" @onSearch="doSearch" @onEmployeeOpt="doEmployeeOpt">
      <user-list :users="users">
        <template slot="action-bar">
          <quick-action-bar>
            <quick-icon-button icon="icon-icon_xinzeng" tooltip="新增" @click="showAddDialog(employeeOpt)" />
          </quick-action-bar>
        </template>
        <template slot="row-action-bar" slot-scope="scope">
          <quick-action-bar v-if="scope.row.is_admin !== 'True'">
            <quick-icon-button icon="icon-xiugai" tooltip="编辑" @click="showEditDialog(scope.row, employeeOpt)" />
            <quick-icon-button icon="icon-xuesheng" tooltip="设置角色" @click="showSetRolesDialog(scope.row.id)" />
            <quick-icon-button icon="icon-shanchu" tooltip="删除" @click="deleteUser(scope.row.id)" />
          </quick-action-bar>
        </template>
      </user-list>
    </user-search>

    <user-add ref="addDialog" @added="refresh" />
    <user-edit ref="editDialog" @edited="refresh" />
    <user-set-roles ref="setRolesDialog" />
  </section>
</template>

<script>
import UserSearch from "./UserSearch.vue";
import UserList from "./UserList.vue";
import UserAdd from "./UserAdd.vue";
import UserEdit from "./UserEdit.vue";
import UserSetRoles from "./UserSetRoles.vue";
import _api from "@/common/api/user";

export default {
  components: {
    UserSearch,
    UserList,
    UserAdd,
    UserEdit,
    UserSetRoles,
  },
  data() {
    return {
      users: [],
      employeeOpt: [],
    };
  },
  methods: {
    doSearch(users) {
      this.users = users;
    },

    doEmployeeOpt(employeeOpt) {
      this.employeeOpt = employeeOpt;
    },

    showAddDialog(employeeOpt) {
      this.$refs.addDialog.showDialog(employeeOpt);
    },

    showEditDialog(user, employeeOpt) {
      // console.log(user);
      // console.log(this.$refs.editDialog);
      this.$refs.editDialog.showDialog(user, employeeOpt);
    },

    showSetRolesDialog(user_id) {
      this.$refs.setRolesDialog.showDialog(user_id);
    },

    deleteUser(id) {
      console.log(id);
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    refresh() {
      this.$refs.search.getUsers();
    },
  },
  mounted() { },
};
</script>

<style scoped lang="scss">
.UserIndex-container {
  height: 100%;
}
</style>